* {
    padding: 0;
    margin: 0;
}

ul,
li {
    list-style-type: none;
}
/*主体部分*/

#content {
    width: 100%;
    height: 100%;
    /* top: 20%;
    left: 20%; */
    overflow: hidden;
    position: absolute;
}

.content-wrap {
    position: relative;
}

.content-wrap > li {
    background: #CAE1FF;
    color: red;
    float: left;
    overflow: hidden;
    position: relative;
}

li:nth-child(2) {
    background: #9BCD9B;
}

li:nth-child(3) {
    background: yellow;
}

button {
    width: 100px;
    height: 50px;
}

.button {
    position: absolute;
    bottom: 0;
}
.charector {
    width: 151px;
    height: 291px;
    background: url("pic/boy.png") -0px -291px no-repeat;
    position: absolute;
    /* 设置一个元素的坐标 */
    left: 6%;
    top: 55%;
    }
/* 暂停 */
.pauseWalk {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}

.boyOriginal {
     background-position: -150px -0px;
    }

.slowWalk {
    /* 填入动画样式规则 */
    /*规定 @keyframes 动画的名称。*/
    -webkit-animation-name: person-slow; 
    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
    -webkit-animation-duration: 950ms;
    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
    -webkit-animation-iteration-count: infinite;
    /*动画切换的方式是一帧一帧的改变*/
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start)
}
.slowFlowerWalk {
    -webkit-animation-name: person-flower-slow;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: step-start;
    -moz-animation-name: person-flower-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: step-start;
   }
/* 普通慢走 */
@-webkit-keyframes person-slow {
    0% {
        background-position: -0px -291px;
    }
    25% {
        background-position: -604px -0px;
    }
    50% {
        background-position: -302px -291px;
    }
    75% {
        background-position: -151px -291px;
    }
    100% {
        background-position: -0px -291px;
    }
}

@-moz-keyframes person-slow {
    0% {
        background-position: -0px -291px;
    }
    25% {
        background-position: -604px -0px;
    }
    50% {
        background-position: -302px -291px;
    }
    75% {
        background-position: -151px -291px;
    }
    100% {
        background-position: -0px -291px;
    }
}

/*带花*/
@-webkit-keyframes person-flower-slow {
    0% {
        background-position: -453px -0px;
    }
    25% {
        background-position: -904px -0px;
    }
    50% {
        background-position: -451px -0px;
    }
    75% {
        background-position: -753px -0px;
    }
    100% {
        background-position: -300px -0px;
    }
}

@-moz-keyframes person-flower-slow {
    0% {
        background-position: -453px -0px;
    }
    25% {
        background-position: -904px -0px;
    }
    50% {
        background-position: -451px -0px;
    }
    75% {
        background-position: -753px -0px;
    }
    100% {
        background-position: -300px -0px;
    }
}

/*男孩转身*/
  
.boy-rotate {
    -webkit-animation-name: boy-rotate;
    -webkit-animation-duration: 850ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: step-start;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: boy-rotate;
    -moz-animation-duration: 850ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: step-start;
    -moz-animation-fill-mode: forwards;
}

@-webkit-keyframes boy-rotate {
  0% {
      background-position: -603px -291px;
  }
  16.7% {
      background-position: -150px -0px;
  }
  33.4% {
      background-position: -453px -291px;
  }
  50.1% {
      background-position: -0px -0px;
  }
  66.8% {
      background-position: -903px -291px;
  }
  83.5% {
      background-position: -753px -291px;
  }
  100% {
      background-position: -603px -291px;
  }
}

@-moz-keyframes boy-rotate {
  0% {
      /*background-position: -603px -291px;*/
  }
  16.7% {
      background-position: -150px -0px;
  }
  33.4% {
      background-position: -453px -291px;
  }
  50.1% {
      background-position: -0px -0px;
  }
  66.8% {
      background-position: -903px -291px;
  }
  83.5% {
      background-position: -753px -291px;
  }
  100% {
      background-position: -603px -291px;
  }
}